<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hellow World!</title>

</head>

<body>
    <!-- 1、通过直接引入官方vue.js地址的方式引入Vue -->

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->

    <!-- 2、通过下载vue.js文件的方式引入Vue -->
    <script src="../例子1,2/js/vue.js"></script>

    <!-- 3、引入httpVueLoader插件用于模拟vue组建 -->
    <script src="../例子1,2/js/httpVueLoader.js"></script>
    <!-- 声明式渲染 -->

    <!-- <div>
        <h1>HTML5 页面直接展示文本 - hello world</h1>
    </div> -->

    <div id="app">
<<<<<<< HEAD:HelloVUE/HelloWorld.html

        <h1>国际统一展示 ： {{ message}}</h1>
        <div style="display: flex;">
            <input type="text"></input><button>1111</button>
        </div>
=======
        <h1>国际统一展示 ： {{ message }}</h1>
        <!-- 以上{{}}中的message，可以是{{message}}、{{ message }}、{{“空格”message}}、{{message“空格”}}、
        {{
            message
        }} -->
        <!-- 但是不允许对{{}}修改书写方式，{“空格”{message}“空格”} 这样是不被允许的，必须明确一点，双大括号是连在一起出现的 -->
        
>>>>>>> 316ce6a7718c7b4584b77bc3c5f60e5b39621cc0:L.课程/1.第一课/HelloVUE/例子/例子1,2/HelloWorld.html
        <!-- 经典的三元表达式 -->
        <h1>这是变体表达1 = {{ message ? message : '你好，这是变体表达1' }}</h1>

        <!-- 在{{}}中写传统的if-else语句，这样的语法是不合法的 -->
        <!-- <h1>这是变体表达1-1 = {{  -->

            <!-- if (stats) {
                message
            } else {
                '你好，这是变体表达1-1，错误语法举例'
            } -->

            <!-- if ( {{stats}} ) { -->
                <!-- {{message}} -->
            <!-- } else { -->
                <!-- '你好，这是变体表达1-1，错误语法举例' -->
            <!-- }

        }}</h1> -->

        <!-- 直接调用自定义方法 -->
        <h1>这是变体表达2 = {{ showText() }}</h1>
        <!-- 其他具体变体表达视情况而改变 -->
<<<<<<< HEAD:HelloVUE/HelloWorld.html
        <button @click="showText"></button>
=======

        <h1>这是变体表达2 = {{ message2 + message3 }}</h1>
>>>>>>> 316ce6a7718c7b4584b77bc3c5f60e5b39621cc0:L.课程/1.第一课/HelloVUE/例子/例子1,2/HelloWorld.html
    </div>
    <div>
        <h1>{{ message }}</h1>
    </div>
    <script>
        // 编程范式: 声明式编程
        var app = new Vue({
            msg: '1111',
            el: '#app', // 用于挂载要管理的元素
<<<<<<< HEAD:HelloVUE/HelloWorld.html
            data: { // 定义数据 
                message: 'Hello World!',
=======
            message1: "null", 
            data: { // 定义数据
                message : 'Hello World!',
                stats : false,
                message2 : "123",
                message3 : "456",
>>>>>>> 316ce6a7718c7b4584b77bc3c5f60e5b39621cc0:L.课程/1.第一课/HelloVUE/例子/例子1,2/HelloWorld.html
            },
            methods: {
                
                showText() {
<<<<<<< HEAD:HelloVUE/HelloWorld.html
                    this.message = this.msg;
                }
=======
                    if (this.stats) {
                        return "调用了变体表达2，stats = true"
                    } else {
                        return "调用了变体表达2，stats = false"
                    }
                },

                showText2() {
                    return this.showText();
                },
>>>>>>> 316ce6a7718c7b4584b77bc3c5f60e5b39621cc0:L.课程/1.第一课/HelloVUE/例子/例子1,2/HelloWorld.html
            },
        });
    </script>

    <!-- ------------我是分割线------------ -->

    <!-- VUE指令 -->
    <div id="app2">
        <h1>
            <a v-bind:href="url" target="_blank">
                VUE官方网站
            </a>
        </h1>
        <span v-bind:title="message">
            鼠标悬停几秒钟，可查看此处动态绑定的提示信息😊
        </span>
    </div>
    <script>
        var app2 = new Vue({
            el: '#app2',
            data: {
                message: '页面于：' + new Date().toLocaleString(),
                url: "https://cn.vuejs.org/"
            },
        });
    </script>

    <!-- ------------我是分割线------------ -->

    <!-- 双向绑定 -->
    <div id="app3">
        <h2>Hello {{name}}</h2>
        <input v-model="name" type="text" />
    </div>
    <script>
        var app3 = new Vue({
            el: '#app3',
            data: {
                name: '',
            }
        });
    </script>

    <!-- ------------我是分割线------------ -->

    <div id="app4">
        <div v-if="state">show-if</div>
        <div v-else="state">show-else</div>
        <br />
        <button v-on:click="hidden">hidden</button>
        <button @click="show">show</button>

        <!-- <br />
        <h1>当前生成的随机数：{{number}}</h1>
        <div v-if="state2">{{message}}</div>
        <div v-else='state2'>{{message}}</div>
        <button v-on:click='button'>点击生成随机数字</button> -->
    </div>
    <script>
        var app4 = new Vue({
            el: '#app4',
            data: {
                state: true,
                message: "",
                number: "",
                state2: true,
            },
            methods: {
                hidden() {
                    this.state = false;
                },
                show() {
                    this.state = true;
                },

                // button() {
                //     this.message = Math.random();
                //     this.number = this.message;
                //     this.state2 = this.message > 0.5;
                //     if (this.state2) {
                //         this.message = "数字比0.5大"
                //     } else {
                //         this.message = "数字比0.5小"
                //     }
                // }
            },

        });
    </script>

    <!-- ------------我是分割线------------ -->

    <!-- 列表的绘制和展示 -->
    <div id="app5">
        <ol>
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
        </ol>
    </div>
    <script>
        Vue.component('todo-item', {
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        });
        var app = new Vue({
            el: '#app5',
            data: {
                groceryList: [
                    { id: 0, text: 'JAVA' },
                    { id: 1, text: 'C++' },
                    { id: 2, text: 'PHP' },
                    { id: 3, text: 'HTML+JS+CSS' },
                    { id: 4, text: 'python' },
                    { id: 5, text: 'objective-c' }
                ]
            },
            created: function () {
                console.log('a is: ' + this.a)
            }
        })
    </script>

    <!-- ------------我是分割线------------ -->

    <!-- 自定义组件的使用 -->
    <!-- <div id="app6">
        <my-component></my-component>
        <NavList></NavList>
    </div>
    <script>
        new Vue({
            el: '#app6', // 用于挂载要管理的元素
            components: {
                // 全局组件
                'my-component': httpVueLoader('../例子1,2/MyComponent.vue'),

                // 局部组件
                'NavList': {
                    //组件的内容
                    template: '<ul><li>首页</li><li>学员管理</li></ul>',
                }
            }
        })
    </script> -->
</body>

</html>